<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="700px">
    <div>
      <el-table
          ref="multipleTable"
          height="500"
          :data="filesList"
          :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border :row-key="getRowKey" @selection-change="selectionLineChangeHandle">
        <template slot="empty">
          <el-empty :image-size="50" description="暂无资料信息"></el-empty>
        </template>
        <el-table-column
            type="selection"
            :selectable="checkSelectable"
            width="55"
        />
        <el-table-column label="资料名称" align="center" prop="dataName" min-width="120px" show-overflow-tooltip/>
        <el-table-column label="业务类型" align="center" prop="associatedBusiness" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="businessTypes" :value="row.associatedBusiness"/>
          </template>
        </el-table-column>
        <el-table-column label="客户类型" align="center" prop="associatedCustomer" min-width="120px" show-overflow-tooltip>
          <template v-slot="{row}">
            <dict-tag :options="customerTypes" :value="row.associatedCustomer"/>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="saveSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: [
    'customerTypes',
    'businessTypes',
    'filesList'
  ],
  data() {
    // 这里存放数据
    return {
      title: '',
      dialogFormVisible: false,
      selectedFilesList: [], //已勾选的资料
      selectedBaseFiles: [],//选中的基础资料
      selectedChooseOneFiles: [],//选中的择一提供资料
      selectedOptionalFiles: [],//选中的可选性资料
      type: -1,//配置类型 1.基础资料 2.择一资料 3.可选资料
    }
  },
  watch: {
    type: {
      handler(val) {
        if (val == 1) {//基础
          this.selectedFilesList = [...this.selectedChooseOneFiles, ...this.selectedOptionalFiles]
        } else if (val == 2) {//择一
          this.selectedFilesList = [...this.selectedBaseFiles, ...this.selectedOptionalFiles]
        } else if (val == 3) {//可选
          this.selectedFilesList = [...this.selectedBaseFiles, ...this.selectedChooseOneFiles]
        }

        console.log(`当前类型${val},已选资料---`, this.selectedFilesList)
      }
    }
  },
  methods: {
    // 判断表格的复选框是否置灰、禁止选择
    checkSelectable(row, index) {
      console.log('当前选中的资料---', this.selectedFilesList)
      if (this.selectedFilesList.length > 0) {
        for (var i = 0; i < this.selectedFilesList.length; i++) {
          if (this.selectedFilesList[i].id == row.id) {
            return false;
          }
        }
        return true;
        console.log(`${index}行`, selectable)
      }
      return true
    },
    // 获取当前选中的资料
    selectionLineChangeHandle(vals) {
      let selectedFiles = this.filterOtherSelectedFiles(vals)
      if (this.type == 1) {
        this.selectedBaseFiles = selectedFiles
      } else if (this.type == 2) {
        this.selectedChooseOneFiles = selectedFiles
      } else if (this.type == 3) {
        this.selectedOptionalFiles = selectedFiles
      }
    },

    // 拿唯一主键
    getRowKey(item) {
      return item.id
    },

    show(type) {
      this.dialogFormVisible = true
      this.type = type
      if (this.type == 1) {
        this.title = '基础资料'
      } else if (this.type == 2) {
        this.title = '择一提供资料'
      } else if (this.type == 3) {
        this.title = '可选择性资料'
      }
    },
    close() {
      this.dialogFormVisible = false
    },
    saveSubmit() {
      let selectedFiles = []
      if (this.type == 1) {
        selectedFiles = this.selectedBaseFiles
      } else if (this.type == 2) {
        selectedFiles = this.selectedChooseOneFiles
      } else if (this.type == 3) {
        selectedFiles = this.selectedOptionalFiles
      }
      this.$emit('success', {
        type: this.type,
        selectedFiles: selectedFiles
      })
      this.close()
    },
    //获取当前资料类型以外的其他选中项,防止旧数据污染
    filterOtherSelectedFiles(allSelectedFiles) {
      const resultFiles = allSelectedFiles.filter((item) => {
        return !this.selectedFilesList.some(ele => ele.id === item.id)
      });
      return resultFiles
    }

  }

}
</script>

<style lang="scss" scoped>
</style>
